<template>
  <div class="mainbox">
    <div class="m-title main-container">
      <div class="title-box">
        <!-- <div>会议日程</div> -->
        <img src="@/assets/images/Group3@1x.png" alt="" />
      </div>
      <div class="main-container content-box">
        <!-- 列表 -->
        <div class="c-box">
          <div v-for="(item, index) in activities" :key="index">
            <div class="c-title">
              <div>
                <img src="@/assets/images/icon@3x.png" alt="" />
                <span style="flex: 1" class="c-b-line"></span>
              </div>
              <div class="log-item">
                <div class="log-title">{{ item.title }}</div>
              </div>
            </div>

            <div class="detail" :class="{ 'last-item': isLastItem(index) }">
              {{ item.detail }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      activities: [
        { title: "活动规模", detail: "2000人会议、1万平米配套展览" },
        {
          title: "论坛会议部分",
          detail:
            "按“1+6+N”结构安排整体论坛和分会场，其中:“1”:为开幕式与主论坛，由我会统筹举; “6+N”:由我会牵头，目前为6个主题(智能-低碳-国际-企业-人才-服务)，N为6个主题的具体展开，由各单位共同筹办，可分别申报",
        },
        {
          title: "配套展览部分",
          detail:
            "配套展览以创新与融合为主线，集中展示机械工业创新能力、创新平台、创新技术、创新产品、创新业态;预计规模1万平米",
        },
      ],
    };
  },
  computed: {
    lastItemIndex() {
      return this.activities.length - 1;
    },
  },
  methods: {
    isLastItem(index) {
      return index === this.lastItemIndex;
    },
  },
};
</script>

<style scoped>
.mainbox {
  flex: 1;
  padding-top: 34px;
  padding-bottom: 81px;
}

.m-title {
  margin-bottom: 34px;
}

.layui-main {
  position: relative;
  width: 1160px;
  margin: 0 auto;
}

.layui-main {
  position: relative;
  width: 1160px;
  margin: 0 auto;
}

.title-box {
  margin-top: 32px;
  margin-bottom: 41px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title-box img {
  width: 434px;
}

.title-box div:nth-child(1) {
  font-size: 40px;
  font-weight: 800;
  color: #243042;
  margin: 17px 0;
}

/* 
.title-box::after {
  display: block;
  content: "";
  width: 60px;
  height: 2px;
  background: #0c2c84;
  border-radius: 1px;
} */
.content-box {
  /* min-height: 600px; */
  border-radius: 20px;
  position: relative;
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
  border-color: #eee;
  color: #5f5f5f;
  box-shadow: 0px 0px 30px 0px rgba(15, 59, 130, 0.12);
}


.c-box {
  margin: 70px 78px 70px 78px;
}

.c-title {
  display: flex;
  /* padding-left: 88px;
  padding-right: 88px; */
  align-items: center;
}

.c-title > div:nth-child(1) {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30px;
  /* margin-right: 95px; */
  /* padding-top: 2%; */
}

.c-b-line {
  position: relative;
  width: 1px;
  border-right: 2px solid transparent;
  background: linear-gradient(white, white) padding-box,
    repeating-linear-gradient(
      -45deg,
      #f8b827 0,
      #f8b827 12px,
      white 0,
      white 20px
    );
  opacity: 0.5;
}

img {
  width: 100%;
  display: inline-block;
  border: none;
  vertical-align: middle;
  overflow-clip-margin: content-box;
  overflow: clip;
}

.c-date-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 400;
  background: #f0f6ff;
  border-radius: 16px;
  padding: 5px;
}

.c-date-switch div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 44px;
  margin: 5px;
  white-space: nowrap;
  box-shadow: 0px 1px 4px 0px rgba(1, 15, 164, 0.12);
  font-size: 22px;
  border-radius: 12px;
  background-color: #fff;
  cursor: pointer;
}

.c-title img {
  width: 20px;
}

.log-title {
  font-size: 24px;
  color: #014ac7;
  margin-left: 20px;
}

.log-item {
  display: flex;
  flex-direction: column;
}
.detail {
  font-size: 24px;
  color: #333333;
  margin-left: 15px;
  border-left: 1px solid #014ac7;
  padding: 10px 0 30px 35px;
  font-family: "AlibabaPuHuiTi-Regular";
}
.last-item {
  font-size: 24px;
  color: #333333;
  margin-left: 15px;
  border-left: 1px solid #fff;
  padding: 10px 0 30px 35px;
}
</style>